<template>
  <div id="particles-js"></div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue';

declare global {
  interface Window {
    particlesJS: any;
  }
}

onMounted(() => {
  // 动态加载 particles.js
  if (!window.particlesJS) {
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js';
    script.onload = () => {
      initParticles();
    };
    document.head.appendChild(script);
  } else {
    initParticles();
  }
});

function initParticles() {
  if (window.particlesJS) {
    window.particlesJS('particles-js', {
      particles: {
        number: { value: 80, density: { enable: true, value_area: 800 } },
        color: { value: "#2563eb" },
        shape: { type: "circle" },
        opacity: { value: 0.5, random: true },
        size: { value: 3, random: true },
        line_linked: {
          enable: true,
          distance: 150,
          color: "#2563eb",
          opacity: 0.3,
          width: 1
        },
        move: {
          enable: true,
          speed: 2,
          direction: "none",
          random: true,
          straight: false,
          out_mode: "out",
          bounce: false
        }
      },
      interactivity: {
        detect_on: "canvas",
        events: {
          onhover: { enable: true, mode: "repulse" },
          onclick: { enable: true, mode: "push" },
          resize: true
        }
      },
      retina_detect: true
    });
  }
}
</script>

<style scoped>
#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}
</style>